<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * { padding: 0; margin: 0; }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }
        tbody tr {
            background-color: #f0f0f0;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
        table{
            float: left;
            margin: 0 20px;
        }
    </style>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
         //打乱顺序
         function shuffle(a) {
            var t = 0;
            for (var i in a) {
                //随机数
                var k = parseInt(Math.random() * a.length);
                t = a[i];
                a[i] = a[k];
                a[k] = t;
            }
        }
        //排序
        function px(x, y) {//降序排序
            return y.fen - x.fen;
        }
        //优秀
        var a = [{
            "name": "小红",
            "fen": 90,
        }, {
            "name": "小天",
            "fen": 93,
        }, {
            "name": "小明",
            "fen": 92,
        }, {
            "name": "小牛",
            "fen": 97,
        }, {
            "name": "牛逼",
            "fen": 100,
        }
        ];
        //中等
        var b = [{
            "name": "何子涵",
            "fen": 73,
        }, {
            "name": "小牛逼",
            "fen": 76,
        }, {
            "name": "三张",
            "fen": 76,
        }, {
            "name": "三藏",
            "fen": 84,
        }, {
            "name": "哈哈",
            "fen": 65,
        }
        ];
        //差的
        var c = [{
            "name": "何子涵",
            "fen": 59,
        }, {
            "name": "小牛逼",
            "fen": 54,
        }, {
            "name": "三张",
            "fen": 58,
        }, {
            "name": "三藏",
            "fen": 51,
        }, {
            "name": "哈哈",
            "fen": 53,
        }
        ];
        //排序
        a.sort(px);
        b.sort(px);
        c.sort(px);
        //打乱
        shuffle(a);
        shuffle(b);
        shuffle(c);
        var d=a.concat(b).concat(c);//合并数组
        var len=d.length;//新的数组长度
        var group1=[],group2=[],group3=[];
        while(len>0){
            group1.push(d.shift());
            group2.push(d.shift());
            group3.push(d.shift());
            len=len-3;
        }
        //数组尾部添加数据和取数据 push() pop()
        //头部  unshift() shift()
        // table(group2);
        // table(group3);
        var tab;
        console.log(group1);
        console.log(group2);
        console.log(group3);
        function table(a){
            tab="";
            for(var i=0;i<a.length;i++){
                tab+="<tr>";
                tab+="<td>"+a[i].name+"</td>";
                tab+="<td>"+a[i].fen+"</td>";
                tab+="</tr>";
            }
            
        }
        $(function(){
            table(group1);
            $(".table").html(tab);
            table(group2);
            $(".table1").html(tab);
            table(group3);
            $(".table2").html(tab);
        })
    </script>
</head>

<body>
    <table class="table" border="1">

    </table>
    <table class="table1" border="1">

    </table>
    <table class="table2" border="1">

    </table>
    <span></span>
</body>

</html>